<template>
	<view>
		<view class="cont">
			<image src="/static/task/img_04.png" mode="widthFix" class="bg-img"></image>
			<image src="/static/task/img_05.png" mode="widthFix" class="bg-img-2"></image>
			<image src="/static/task/img_06.png" mode="widthFix" class="bg-img-3"></image>
			<view class="first-time">
				<text class="t1">{{time1hours}}</text>
				<text class="t2">:</text>
				<text class="t1">{{time1minutes}}</text>
				<text class="t2">:</text>
				<text class="t1">{{time1seconds}}</text>
			</view>
			<view class="second-time">
				<text class="t1">{{time2minutes}}</text>
				<text class="t2">:</text>
				<text class="t1">{{time2seconds}}</text>
			</view>
			<view class="list-box">
				<image src="/static/task/icon_01.png" mode="widthFix" class="icon"></image>
				<view class="list">
					<view class="item" v-for="(t,i) in details.sign" :key="i">
						<image src="/static/task/img_07.png" mode="widthFix" class="img"></image>
						<text class="tag">打卡</br>{{i+1}}</text>
						<text class="title">打卡时间</text>
						<text class="con con1" v-if="t.status==1 || (t.status==4&&btnTxt=='等待打卡')">{{t.sign_begin_time | getTime()}}</text>
						<text class="con con3" v-else-if="t.status==2">打卡成功</text>
						<text class="con con2" v-else-if="t.status==3">打卡失败</text>
						<text class="con con3" v-else @click="passSign(t,i)">{{btnTxt}}</text>
					</view>
				</view>
			</view>
			<view class="list-box list-box2">
				<image src="/static/task/icon_02.png" mode="widthFix" class="icon2"></image>
				<view class="inner-box">
					<view class="title">
						<image src="/static/task/img_08.png" mode="widthFix" class="img"></image>
						<text class="t">活动规则</text>
					</view>
					<view v-html="details.rule"></view>
				</view>
			</view>
			<view class="popup" @touchmove.stop.prevent v-if="popShow">
				<view class="mask"></view>
				<view class="pop-cont">
					<image src="/static/task/img_13.png" mode="widthFix" class="bg-img"></image>
					<image src="/static/task/img_14.png" mode="widthFix" class="x-img" @click="closePop"></image>
					<text class="txt">奖励<text>{{endCont}}</text>元已到账我的钱包</text>
					<text class="btn" @click="goBack">查看</text>
				</view>
			</view>
		</view>
		<uni-popup ref="failPopup" :maskClick="false">
			<view class="fail-cont">
				<image src="/static/img_01.png" mode="widthFix" class="img"></image>
				<text class="t1">签到失败</text>
				<text class="t2">失败了不要伤心，再挑战一次</text>
				<view class="btn" @click="fan()">
					<text>重新挑战</text>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				popShow: false,
				details: '',
				clock: '',
				clock2: '',
				clock3: '',
				time1hours: '--',
				time1minutes: '--',
				time1seconds: '--',
				time2minutes: '--',
				time2seconds: '--',
				btnTxt: '等待打卡',
				nowIndex:'',
				endCont:''//打卡成功奖励
			};
		},
		onShow() {
			
		},
		onLoad() {
			this.getPassDetail(2,1);
			this.clock3 = setInterval(()=>{
				// console.log('定时请求')
				this.getPassDetail(2);
			},10000)
		},
		onUnload() {
			clearInterval(this.clock);
			clearInterval(this.clock2);
			// console.log('关闭定时请求')
			clearInterval(this.clock3);
		},
		filters: {
			getTime(t, l) {
				let dates = new Date(t * 1000);
				let y = dates.getFullYear(); // 年
				let MM = dates.getMonth() + 1; // 月
				MM = MM < 10 ? ('0' + MM) : MM;
				let d = dates.getDate(); // 日
				d = d < 10 ? ('0' + d) : d;
				let h = dates.getHours(); // 时
				h = h < 10 ? ('0' + h) : h;
				let m = dates.getMinutes(); // 分
				m = m < 10 ? ('0' + m) : m;
				let s = dates.getSeconds(); // 秒
				s = s < 10 ? ('0' + s) : s;
				return h + ':' + m + ':' + s;
			}
		},
		methods: {
			// 返回
			fan(){
				uni.navigateBack();
			},
			// 跳转钱包查看
			goBack(){
				uni.navigateTo({
					url:'/pages/my/myBack/index/index'
				})
			},
			// 第一个倒计时
			cuttime(begin, end) {
				let _this = this;
				var nowDate = new Date();
				var startDate = new Date(begin * 1000); //下次打卡开始时间
				var endDate = new Date(end * 1000);
				var dateDiff = startDate.getTime() - nowDate.getTime();
				if (dateDiff <= 0) {
					// 已到打卡时间
					_this.time1hours = '00';
					_this.time1minutes = '00';
					_this.time1seconds = '00';
					_this.btnTxt = '点击打卡';
					// console.log('第一个倒计时到了')
					// 暂停当前倒计时 开始打卡倒计时
					clearInterval(_this.clock);
					clearInterval(_this.clock2);
					_this.clock2 = setInterval(() => {
						_this.cuttime2(begin, end);
					}, 1000)
					return;
				} else {
					uni.hideLoading();
				}
				// // console.log('dateDiff',dateDiff)
				var days = Math.floor(dateDiff / (24 * 3600 * 1000)) //计算出天数 
				//计算出小时数 
				var leave1 = dateDiff % (24 * 3600 * 1000) //计算天数后剩余的毫秒数 
				var hours = Math.floor(leave1 / (3600 * 1000))
				//计算相差分钟数 
				var leave2 = leave1 % (3600 * 1000) //计算小时数后剩余的毫秒数 
				var minutes = Math.floor(leave2 / (60 * 1000))
				//计算相差秒数 
				var leave3 = leave2 % (60 * 1000) //计算分钟数后剩余的毫秒数 
				var seconds = Math.round(leave3 / 1000)
				//调用checkTime方法将数字小于10的在前面补0
				days = this.checkTime(days);
				hours = this.checkTime(hours + days * 24);
				minutes = this.checkTime(minutes);
				seconds = this.checkTime(seconds);
				_this.time1hours = this.checkTime(hours);
				_this.time1minutes = this.checkTime(minutes);
				_this.time1seconds = this.checkTime(seconds);
				// let cont = "剩余时间:" + days + "天" + hours + "小时" + minutes + "分钟" + seconds + "秒"
				// // console.log(cont);
			},
			// 第二个倒计时
			cuttime2(begin, end) {
				let _this = this;
				var nowDate = new Date();
				var startDate = new Date(begin * 1000); //下次打卡开始时间
				var endDate = new Date(end * 1000);
				var dateDiff = endDate.getTime() - nowDate.getTime();
				uni.hideLoading();
				if (dateDiff <= 0) {
					// 已到打卡时间
					clearInterval(_this.clock);
					clearInterval(_this.clock2);
					clearInterval(_this.clock3);
					_this.time2minutes = '00';
					_this.time2seconds = '00';
					// console.log('第二个倒计时到了')
					// console.log('打卡失败')
					uni.showToast({
						icon: 'none',
						title: '打卡失败'
					})
					setTimeout(()=>{
						uni.showToast({
							icon: 'none',
							title: '签到失败，请重新参加'
						})
						// 开启失败
						_this.$refs.failPopup.open();
						// setTimeout(()=>{
						// 	uni.navigateBack();
						// },1000)
					},500)
				}
				var days = Math.floor(dateDiff / (24 * 3600 * 1000)) //计算出天数 
				//计算出小时数 
				var leave1 = dateDiff % (24 * 3600 * 1000) //计算天数后剩余的毫秒数 
				var hours = Math.floor(leave1 / (3600 * 1000))
				//计算相差分钟数 
				var leave2 = leave1 % (3600 * 1000) //计算小时数后剩余的毫秒数 
				var minutes = Math.floor(leave2 / (60 * 1000))
				//计算相差秒数 
				var leave3 = leave2 % (60 * 1000) //计算分钟数后剩余的毫秒数 
				var seconds = Math.round(leave3 / 1000)
				//调用checkTime方法将数字小于10的在前面补0
				days = this.checkTime(days);
				hours = this.checkTime(hours + days * 24);
				minutes = this.checkTime(minutes);
				seconds = this.checkTime(seconds);
				// _this.time2hours = this.checkTime(hours);
				_this.time2minutes = this.checkTime(minutes);
				_this.time2seconds = this.checkTime(seconds);
				// let cont = "剩余时间:" + days + "天" + hours + "小时" + minutes + "分钟" + seconds + "秒"
				// // console.log(cont);
			},
			checkTime(i) {
				if (i < 10) {
					i = "0" + Number(i);
				}
				return i;
			},
			// 获取详情
			getPassDetail(id,s) {
				if(s){
					uni.showLoading();
				}
				let _this = this;
				this.$utils.request("/api/clock/getPassDetail", {
					id
				}, function(res) {
					if (res.code == 200) {
						_this.details = res.data;
						// 获取当前正在打卡时间信息或者下次打卡时间信息
						if(res.data.join==''){
							clearInterval(_this.clock);
							clearInterval(_this.clock2);
							clearInterval(_this.clock3);
							uni.showToast({
								icon: 'none',
								title: '签到失败，请重新参加'
							})
							// 开启失败
							_this.$refs.failPopup.open();
							// setTimeout(()=>{
							// 	uni.navigateBack();
							// },1000)
							return
						}
						res.data.sign.forEach((item,index)=>{
							if(item.status==4){
								_this.nowIndex = index;
							}
						})
						if(_this.nowIndex===''){
							uni.hideLoading();
							// console.log('活动失效关闭自动请求')
							clearInterval(_this.clock3);
						}else{
							// 开始倒计时
							clearInterval(_this.clock);
							_this.clock = setInterval(() => {
								_this.cuttime(_this.details.sign[_this.nowIndex].sign_begin_time, _this.details.sign[_this.nowIndex]
									.sign_end_time)
							}, 1000)
						}
					} else {
						uni.showToast({
							icon: 'none',
							title: res.message
						})
					}
				})
			},
			// 打卡
			passSign(t,i) {
				let _this = this;
				if(_this.btnTxt!='点击打卡'){
					return
				}
				uni.showLoading()
				_this.$utils.postrequest("/api/clock/passSign", {
					sign_id: t.id
				}, function(res) {
					uni.hideLoading()
					// console.log(res);
					
					if (res.code == 200) {
						uni.showToast({
							icon: 'none',
							title: '打卡成功'
						})
						clearInterval(_this.clock);
						clearInterval(_this.clock2);
						if(i==(_this.details.sign.length-1)){
							// 获取奖励
							_this.getLin();
						}else{
							setTimeout(()=>{
								uni.redirectTo({
									url:'/pages/active/twoHoursTask'
								});
							},500)
						}
					} else {
						uni.showToast({
							icon: 'none',
							title: res.message
						})
					}
				})
			},
			getLin(){
				let _this = this;
				let data = {
					pass_id:2,
					join_id:_this.details.join.id
				}
				this.$utils.postrequest("/api/clock/is_pass", data, function(res) {
					if(res.code == 200) {
						_this.endCont = res.data
						_this.starClock();
					}else{
						uni.showToast({
							icon: 'none',
							title: res.message
						})
					}
				})
				// TODO 获取奖励接口调用后打开奖励弹窗
				// _this.endCont = 0;//获取奖励金额
			
			},
			starClock() {
				this.popShow = true;
				// this.$refs.popup.open();
			},
			closePop() {
				// this.$refs.popup.close();
				this.popShow = false;
			}
		}
	}
</script>

<style lang="scss">
	.cont {
		position: relative;

		.bg-img {
			display: block;
			width: 100%;
		}

		.bg-img-2 {
			width: 167rpx;
			position: absolute;
			top: 616rpx;
			left: 30rpx;
		}

		.bg-img-3 {
			width: 145rpx;
			position: absolute;
			top: 592rpx;
			right: 61rpx;
		}

		.first-time {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			position: absolute;
			top: 300rpx;

			.t1 {
				width: 138rpx;
				height: 143rpx;
				background: #FFFFFF;
				// background: #8494FF;
				border-radius: 10rpx;
				text-align: center;
				font-size: 86rpx;
				font-family: PingFang SC;
				color: #8494FF;
				line-height: 143rpx;
				box-shadow: 5rpx 5rpx #B2BCFF;
			}

			.t2 {
				font-size: 86rpx;
				font-family: PingFang SC;
				color: #FFFFFF;
				line-height: 143rpx;
				margin: 0 18rpx;
			}
		}

		.second-time {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			position: absolute;
			top: 598rpx;

			.t1 {
				width: 138rpx;
				height: 143rpx;
				background: #8494FF;
				border-radius: 10rpx;
				text-align: center;
				font-size: 86rpx;
				font-family: PingFang SC;
				color: #FFFFFF;
				line-height: 143rpx;
				box-shadow: 5rpx 5rpx #B2BCFF;
			}

			.t2 {
				font-size: 86rpx;
				font-family: PingFang SC;
				color: #8494FF;
				line-height: 143rpx;
				margin: 0 18rpx;
			}
		}

		.list-box {
			position: absolute;
			top: 872rpx;
			left: 0;
			right: 0;
			margin: auto;
			width: 663rpx;
			// height: 677rpx;
			background: #4F67F0;
			border-radius: 10rpx;
			box-sizing: border-box;
			padding: 22rpx 23rpx;

			.list {
				width: 100%;
				height: 100%;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;

				.item {
					width: 300rpx;
					position: relative;
					.img {
						display: block;
						width: 100%;
					}

					.tag {
						width: 50rpx;
						height: 57rpx;
						text-align: center;
						position: absolute;
						top: 0;
						left: 0;
						font-size: 18rpx;
						font-family: PingFang SC;
						color: #FFFFFF;
						line-height: 24rpx;
					}

					.title {
						position: absolute;
						top: 21rpx;
						left: 0;
						width: 100%;
						text-align: center;
						font-size: 26rpx;
						font-family: PingFang SC;
						color: #4F67F0;
						line-height: 26rpx;
					}

					.con {
						position: absolute;
						bottom: 10rpx;
						left: 0;
						width: 100%;
						text-align: center;
						font-size: 36rpx;
						font-family: PingFang SC;
						color: #4F67F0;
						line-height: 36rpx;
					}

					.con1 {
						bottom: 26rpx;
					}

					.con2,
					.con3 {
						width: 153rpx;
						height: 47rpx;
						background: #FF8B2F;
						border-radius: 10rpx;
						right: 0;
						margin: auto;
						font-size: 30rpx;
						font-family: PingFang SC;
						color: #FFFFFF;
						line-height: 47rpx;
					}

					.con3 {
						background: #4F67F0;
					}
				}
			}

			.icon {
				width: 80rpx;
				position: absolute;
				left: -30rpx;
				bottom: -10rpx;
			}
		}

		.list-box2 {
			top: auto;
			bottom: 25rpx;
			height: 642rpx;
			background: #4F67F0;
			padding: 15rpx;

			.inner-box {
				width: 100%;
				height: 100%;
				background: #FFFFFF;
				border-radius: 10rpx;
				box-sizing: border-box;
				padding: 30rpx;

				.title {
					width: 100%;
					height: 28rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-bottom: 38rpx;
					position: relative;

					.img {
						width: 250rpx;
					}

					.t {
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
						text-align: center;
						font-size: 28rpx;
						font-family: PingFang SC;
						color: #6C86FD;
						line-height: 28rpx;
					}
				}

				.p {
					font-size: 26rpx;
					font-family: PingFang SC;
					color: #6D8EFF;
					line-height: 32rpx;
				}
			}

			.icon2 {
				width: 113rpx;
				bottom: -25rpx;
				right: -14rpx;
				position: absolute;
			}
		}
	}
	.popup {
		width: 100%;
		height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;
	
		.mask {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			background: rgba(0, 0, 0, .5);
		}
	
		.pop-cont {
			width: 750rpx;
			position: relative;
			z-index: 2;
	
			.bg-img {
				display: block;
				width: 100%;
			}
	
			.x-img {
				position: absolute;
				left: 0;
				right: 0;
				margin: auto;
				bottom: -80rpx;
				width: 48rpx;
			}
	
			.txt {
				width: 100%;
				position: absolute;
				left: 0;
				bottom: 80rpx;
				text-align: center;
				font-size: 26rpx;
				font-family: PingFang SC;
				color: #FEFDFB;
	
				text {
					color: #FCD78D;
				}
			}
	
			.btn {
				position: absolute;
				left: 0;
				right: 0;
				margin: auto;
				bottom: 6rpx;
				width: 138rpx;
				height: 56rpx;
				background: #825CEE;
				border: 3rpx solid #FEFAE1;
				border-radius: 28rpx;
				text-align: center;
				font-size: 30rpx;
				font-family: PingFang SC;
				color: #F0C2FF;
				line-height: 56rpx;
			}
		}
	}
	.fail-cont{
		width: 538rpx;
		height: 700rpx;
		border-radius: 20rpx;
		background: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		.img{
			width: 272rpx;
		}
		.t1{
			font-size: 40rpx;
			line-height: 40rpx;
			color: #FD8301;
			margin-top: 30rpx;
		}
		.t2{
			font-size: 28rpx;
			line-height: 28rpx;
			color: #4D4D4D;
			margin-top: 30rpx;
			margin-bottom: 52rpx;
		}
		.btn{
			width: 254rpx;
			height: 86rpx;
			background: linear-gradient(-3deg, #7B5EFC, #6044FE);
			border-radius: 43rpx;
			text-align: center;
			font-size: 30rpx;
			color: #FFFFFF;
			line-height: 86rpx;
		}
	}
</style>
